<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link  href="grid.css" type="text/css" />
<script src="jquery-min.js"></script>



<div  style="width:500px;height:300px;border:1px solid #ccc;" class="fix-grid">
   <div style="width:100%;height:100%; position:relative">
      <div style="width:100%; overflow:hidden;background:#f0f0f0; position:relative"  class="fix-grid-header">
          <table width="100%" style="table-layout:fixed;">
            <colgroup>
                <col width="100px"/>
                <col width="200px"/>
                <col width="300px"/>
                <col width="20px"/>
            </colgroup>
             <tr>
                <td style="border-right:1px solid #ccc;text-overflow:ellipsis; overflow:hidden; height:20px;-moz-user-select:none;-webkit-user-select:none; cursor:pointer" unselectable="on" onselectstart="return false;">标题1
               	<span style="display:inline; float:right; height:20px; width:10px; cursor:col-resize; overflow:hidden; position:relative" class="fix-grid-header-resize"></span></td>
                
                <td style="border-right:1px solid #ccc;text-overflow:ellipsis" unselectable="on" >标题2
                	<span style="display:inline; float:right; height:20px; width:10px; cursor:col-resize;overflow:hidden;position:relative" class="fix-grid-header-resize"></span></td>
                <td style="border-right:1px solid #ccc" unselectable="on" >标题3</td>
                <td/>
             </tr>
          </table>
     </div>
    
    <div style="width:100%; overflow:hidden; bottom:20px; left:0; top:20px; position:absolute">
         <div  style="width:100%; height:100%;overflow:auto; " id="gridData" class="fix-grid-data">
        <table  width="100%" style="border:1px solid #ccc; table-layout:fixed">
        <colgroup>
            <col width="100px"/>
            <col width="200px"/>
            <col width="300px"/>
         </colgroup>
            
             <tr>
                <td>标题1</td>
                <td>标题2</td>
                 <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                 <td>标题3</td>
             </tr>             <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>             <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
                          <tr>
                <td>标题1</td>
                <td>标题2</td>
                <td>标题3</td>
             </tr>
          </table>
          </div>
      </div>
        <div style="width:100%; height:20px; position:absolute; bottom:0;">111</div>
    
   </div>
</div>


<script language="javascript">

var Grid =  function(cls){
	this.cls = cls;
	
	var g_hd    = '.fix-grid-header';
	var g_hd_rz = '.fix-grid-header-resize';
	var g_data  = '.fix-grid-data';
	
	var jq = $(cls);
	
	/**初始化 grid*/
	this.init = function() {
		 eventGridScroll();
		 eventCellWidthResize();
	}
	
	/**列宽度改变*/
	var eventCellWidthResize = function(){
		var hasMove = false; //是否移动中
		var startX = 0;
		var initWidth = 0;
		
		$(g_hd_rz,jq).each(function(index){
			
			$(this).mousedown(function(e) {
				
				hasMove   = true;
				startX    = e.clientX;
				var cell  = $(this).parent();
				initWidth =  $(cell).outerWidth();
				
			}).mousemove(function(e) {
				if(hasMove) {
					var width = initWidth + (e.clientX-startX);
					if( width > 0 ) {  //改变的宽度
						$($(g_hd   +' table col',jq)[index]).width(width); //表头宽度
						$($(g_data +' table col',jq)[index]).width(width); //数据宽度
					}
				}
			})
		});
		
		$(document).mouseup(function() {
			hasMove = false;
		})
	}
 	
	/**模向滚动数据*/
	var eventGridScroll = function(){
		$(g_data,jq).scroll(function(e){
			$(g_hd +' table',jq).css('marginLeft','-'+$(this).scrollLeft()+'px');						   	
		});
	}
}

/**分页*/
var Pager = function(page,pagesize,rowcount){
	this.page = page;
	this.pagesize = pagesize;
	this.rowcount = rowcount;
	var totalPage = rowcount % pagesize>0 ? (rowcount/pagesize) +1 : rowcount/pagesize;
	var num=9;
	
}
 

var g = new Grid('.fix-grid');
g.init();
</script>
</body>
</html>
